<template>
  <section>
    <el-form label-width="20px" inline>
      <el-form-item label="" style="border: 0px solid red;">
        <search-tool v-on:search="searchEvent"></search-tool>
      </el-form-item>
      <el-form-item>
        <el-button size="mini" type="primary" @click="addBtn">+</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="courseDefineList">
      <el-table-column type="index" label="序号"/>
      <el-table-column label="课程名称" prop="title"/>
      <!--<el-table-column label="开课时间" prop="start" :formatter="timeFormatter"/>-->
      <!--<el-table-column label="结课时间" prop="end" :formatter="timeFormatter"/>-->
      <el-table-column label="课程简介" prop="description">
        <template slot-scope="scope">
          <el-popover placement="top-start" title="" width="200" trigger="click" :content="scope.row.description">
            <el-button slot="reference" size="mini" type="text">预览</el-button>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="班次">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="setClass(scope.row)">设置</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="editBtn(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click='delBtn(scope.row)' >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-show="totalPage>0" style="margin-top:10px;" small layout="prev, pager, next" :page-count="totalPage" @current-change="goPage"/>
    <el-dialog :visible.sync="editDialog" :title="currCourseDefine.id?currCourseDefine.title+'-编辑':'新建'" v-if="editDialog" width="80%">
      <edit-define :courseDefine="currCourseDefine" v-on:cancel="getCourseDefineList(0,filterObj)"></edit-define>
    </el-dialog>
  </section>
</template>

<script>
  import editDefine from './editDefine'
  import searchTool from '@/common/searchTool'
  import dateFormater from '@/common/date-formater'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import errHandler from '@/assets/errHandler.js'
  import Vue from 'vue'//后续添加属性，需要vue联动
  export default {
    name: "index",
    components:{searchTool,editDefine},
    data(){
      return{
        courseDefineList:null,
        totalPage:0,
        currCourseDefine:{},
        editDialog:false,
        filterObj:{}
      }
    },
    created(){
      this.getCourseDefineList()
    },
    computed: {
      ...mapGetters(['department']),
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      timeFormatter(a,b,c,d){
        return dateFormater.format(c)
      },
      addBtn(){
        this.currCourseDefine={title:'',description:'',sn:'',departmentId:this.department.id,data:{},userType:2}
        this.editDialog=true
      },
      goPage(val){
        this.getCourseDefineList(val-1,this.filterObj)
      },
      searchEvent(e){
        this.filterObj.key=e
        this.getCourseDefineList(0,this.filterObj)
      },
      getCourseDefineList(pageNo,filterObj){
        this.fetch({name:"getCourseDefineList",data:{page:pageNo? pageNo:0,departmentId:this.department.id,...filterObj}})
          .then(res=>{
            console.log('课程定义列表-------------',res.content)
            this.courseDefineList = res.content
            this.totalPage = res.totalPages
            this.editDialog=false
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      setClass(row){
        this.$router.push('/businessManagement/class/'+row.id)
      },
      editBtn(row){
        this.currCourseDefine=row
        this.editDialog=true
      },
      delBtn(row){
        this.$confirm('确认删除？')
          .then(()=> {
            this.fetch({name:"delCourseDefine",data:{id:row.id}})
              .then(res=>{
                this.$message({type: 'success',message: '删除成功！'})
                this.getCourseDefineList(0,this.filterObj)
              })
              .catch(err=>{
                console.log(err)
                errHandler.handle(this,err)
              })
          })
          .catch(() => {
            this.$message({type: 'info',message: '已取消删除'})
            this.loading = false
          })
      },
    }
  }
</script>

<style scoped>

</style>
